<template>
  <div class="retrieve" :style="{width: `${width}`, height: `${height}`}" @mouseleave="mouseleave">
    <input
      @input="handleInput"
      @blur="handleBlur"
      @compositionstart="compositionstartInput"
      @compositionend="compositionendInput"
      class="retrieve-input"
      v-model="bip"
      ref="input"
      :disabled = disabled
      :placeholder="placeholder">
     <div class="retrieve-com" v-show="visibleCom" :style="{width: `${width}`, top: `${top}px`, left: `${left}px`}">
       <p class="t-center mt20" v-show="visibleLoading"><i class="iconfont icon-loading"></i></p>
       <div v-for="item in mans" class="retrieve-man clear" @click="chooseMan(item)">
         <zz-user class="left" :srcProps="item.memberPic"></zz-user>
         <div class="left">
           <p class="ellipsis" :style="{width: `${Number.parseInt(width) - 100}px`}" style="margin-top: 2px;" :title="`BIP:${item.thirdPartUserName}`">{{item.memberName}}(BIP:{{item.thirdPartUserName}})</p>
           <p style="margin-top: 2px">{{item.departmentName}}</p>
         </div>
       </div>
     </div>
  </div>
</template>

<script>
  export default {
    name: 'zz-retrieve',
    data () {
      return {
        bip: '',
        top: 0,
        left: 0,
        visibleCom: false,
        visibleLoading: false,
        mans: []
      }
    },
    props: {
      width: {
        type: String,
        default: '250px'
      },
      height: {
        type: String,
        default: '30px'
      },
      debounce: {
        type: Number,
        default: 500
      },
      placeholder: {
        type: String,
        default: '请输入BIP帐号/姓名'
      },
      projectId: {
        type: String,
        default: ''
      },
      resetBip: {
        type: Number,
        default: 0
      },
      all: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    mounted () {
      this.initPosition()
    },
    watch: {
      resetBip () {
        this.bip = ''
      },
      bip () {
        // 过滤空格
        let word = this.bip.replace(/\s/g, '')
        if (word === '') {
          this.$emit('clearUp')
        }
      }
    },
    methods: {
      initPosition () {
        const rect = this.$refs.input.getBoundingClientRect()
        this.left = rect.left
        this.top = rect.top + Number.parseInt(this.height) - 1
      },
      mouseleave () {
        this.visibleCom = false
        this.mans = []
      },
      compositionstartInput () {
        this.isCompositionend = true
      },

      compositionendInput () {
        this.isCompositionend = false
      },

      handleInput (e) {
        if (this.isCompositionend) {
          return
        }
        this.visibleLoading = true
        const { value } = e.target
        if (value) {
          this.visibleCom = true
        }
        this.showList = true
        if (this.onInput) this.onInput(value)
        if (this.debounce) {
          if (this.debounceTask !== undefined) clearTimeout(this.debounceTask)
          this.debounceTask = setTimeout(() => {
            return this.getData(value)
          }, this.debounce)
        } else {
          return this.getData(value)
        }
      },
      handleBlur (e) {
        const { value } = e.target
        if (!value) {
          this.$emit('click')
        }
      },
      getData () {
        const data = {
          'query.bip': this.bip
        }
        let url = ''
        if (this.all) {
          url = `${this.$site.projectServer}/front/person/getMemberListByBipAll.htm`
        } else {
          data['query.project_id'] = this.projectId
          url = `${this.$site.projectServer}/front/person/getMemberListByBip.htm`
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: url,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.mans = res.data.list
          this.visibleLoading = false
        })
      },
      chooseMan (item) {
        this.$emit('click', item)
        this.bip = item.memberName
        this.visibleCom = false
        this.mans = []
      }
    }
  }
</script>

<style lang="scss">
  .retrieve{
    position: relative;
    vertical-align: top;
    .retrieve-input{
      width: 100%;
      height: 100%;
      border: 1px $color-line solid;
      padding: 0 5px;
      box-sizing: border-box;
    }
    .border{
      border: 1px $color-line solid;
    }
    .retrieve-com{
      z-index: 2;
      padding-top: 5px;
      height: 250px;
      overflow: auto;
      position: fixed;
      background: #fff;
      box-sizing: border-box;
      border: 1px $color-line solid;
    }
    .retrieve-man{
      padding: 0 5px;
      cursor: pointer;
      margin-bottom: 5px;
      &:hover{
        color: $color-hover;
      }
    }
  }
</style>
